/* hook组件 useState */
import React, {useState} from "react";
import {Button} from "antd";


/* 惰性化处理：只有第一次渲染组件处理这些逻辑，以后组件更新，这样的逻辑就不要运行了 */
const Demo = function (props) {
    // 我们需要把基于属性传递进来的x/y，经过其他处理的结果作为初始值
    //
    // let {x, y} = props,
    //     total = 0;
    //
    // for(let i =x;i<y;i++){
    //     console.log(111) // 会执行多次
    //     total += String(Math.random()).slice(0,2)
    // }
    //
    // let [num,setNum] = useState(total)
    /* 对初始值的操作，进行惰性化处理 */
    let [num, setNum] = useState(()=>{
        let {x, y} = props,
                total = 0;
        for(let i =x;i<y;i++){
            console.log(111) // 只执行一次
            total += String(Math.random()).slice(0,2)
        }
        return total
    })

    const handle = () => {
        setNum(1000)
    }
    return <div className="demo">
        <span className="num">x:{num}</span>
        <Button type="primary" size="small" onClick={handle}>新增</Button>
    </div>
}

export default Demo